<template>
  <Header title="地址管理" />
  <van-address-list
    :list="list"
    default-tag-text="默认"
    @add="onAdd"
    @edit="onEdit"
    @select="select"
  />
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
import Header from "../../components/Header.vue";
import { onMounted } from "@vue/runtime-core";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
export default {
  components: {
    Header,
  },
  setup() {
    let store = useStore();
    let router = useRouter();
    let data = reactive({
      list: [],
    });

    const select = (item)=>{
      store.commit("CONTACT",item)
      router.back()
    }
    //初始化数据
    const init = () => {
      data.list = store.state.userAddress.map((item) => {
        return {
          id: item.id,
          name: item.name,
          tel: item.tel,
          address: `${item.province}${item.city}${item.county}${item.addressDetail}`,
          isDefault: !!item.isDefault,
        };
      });
    };

    onMounted(() => {
      init();
    });
    //新增按钮触发事件
    const onAdd = () => {
      router.push({
        path: "./addressedit",
        query: {
          type: "add",
        },
      });
    };

    //编辑按钮触发事件
    const onEdit = (item) => {
      router.push({
        path: "./addressedit",
        query: {
          type: "change",
          id: item.id,
        },
      });
    };

    return {
      ...toRefs(data),
      onAdd,
      onEdit,
      select
    };
  },
};
</script>

<style lang="less" scoped>
:deep(.van-button--danger) {
  background-color: #ffc400;
  border-color: #ffc400;
}
:deep(.van-switch--on) {
  background-color: #ffc400;
}
:deep(.van-radio__icon) {
  display: none;
}
</style>